<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('chuku列表')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>出库单号：</label>
                            <input type="text" name="chukudanhao"/>
                        </li>
                        <li class="select-time">
                            <label>下单日期：</label>
                            <input type="text" class="time-input" id="startTime1" placeholder="开始时间"
                                   name="params[beginXiadanriqi]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime1" placeholder="结束时间"
                                   name="params[endXiadanriqi]"/>
                        </li>
                        <li class="select-time">
                            <label>发货日期：</label>
                            <input type="text" class="time-input" id="startTime2" placeholder="开始时间"
                                   name="params[beginFahuoriqi]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime2" placeholder="结束时间"
                                   name="params[endFahuoriqi]"/>
                        </li>
                        <li>
                            <label>项目名称：</label>
                            <input type="text" name="xiangmumingcheng"/>
                        </li>
                        <li>
                            <label>业务员：</label>
                            <input type="text" name="yewuyuan"/>
                        </li>
                        <li>
                            <label>发货人：</label>
                            <input type="text" name="fahuoren"/>
                        </li>
                        <li>
                            <label>收货地址：</label>
                            <input type="text" name="shouhuodizhi"/>
                        </li>
                        <li>
                            <label>门扇配套：</label>
                            <input type="text" name="menshanpeitao"/>
                        </li>
                        <li>
                            <label>五金配套：</label>
                            <select name="wujinpeitao">
                                <option th:value="${null}">所有</option>
                                <option value="常规五金配套">常规五金配套</option>
                                <option value="单要防火锁">单要防火锁</option>
                                <option value="单要闭门器">单要闭门器</option>
                                <option value="单要拉爆盖">单要拉爆盖</option>
                                <option value="不含五金">不含五金</option>
                            </select>
                        </li>
                        <li>
                            <label>商品名称：</label>
                            <input type="text" name="shangpinbianhao"/>
                        </li>
                        <li>
                            <label>备注：</label>
                            <input type="text" name="beizhu"/>
                        </li>
                        <li>
                            <label>总金额：</label>
                            <input type="text" name="zongjine"/>
                        </li>
                        <li>
                            <label style="width: auto;">是否已出库：</label>
                            <select name="chuku">
                                <option th:value="${null}">所有</option>
                                <option value="0">未出库</option>
                                <option value="1">已出库</option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="jinchuguanli:chuku:add">
                <i class="fa fa-plus"></i> 添加
            </a>
            <a class="btn btn-primary single disabled" onclick="$.operate.edit()"
               shiro:hasPermission="jinchuguanli:chuku:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()"
               shiro:hasPermission="jinchuguanli:chuku:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <!--            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="jinchuguanli:chuku:export">-->
            <!--                <i class="fa fa-download"></i> 导出-->
            <!--            </a>-->
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('jinchuguanli:chuku:edit')}]];
    var removeFlag = [[${@permission.hasPermi('jinchuguanli:chuku:remove')}]];
    var prefix = ctx + "jinchuguanli/chuku";

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            modalName: "出库单",
            showColumns: false,
            pagination: true,
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: 'id主键',
                    visible: false
                },
                {
                    title: '发货通知单',
                    align: "center",
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" ' +
                            'href="javascript:void(0)" onclick="DanJuShow(' + row.id + ')">' +
                            '<i class="fa fa-edit"></i>出库通知单</a> ');
                        return actions.join('');
                    }
                },
                {
                    field: 'chukudanhao',
                    title: '出库单号',
                    align: "center",
                },
                {
                    field: 'xiadanriqi',
                    title: '下单日期',
                    align: "center",
                },
                {
                    field: 'fahuoriqi',
                    title: '发货日期',
                    align: "center",
                },
                {
                    field: 'xiangmumingcheng',
                    title: '项目名称',
                    align: "center",
                },
                {
                    field: 'yewuyuan',
                    title: '业务员',
                    align: "center",
                },
                {
                    field: 'fahuoren',
                    title: '发货人',
                    align: "center",
                },
                {
                    field: 'shouhuodizhi',
                    title: '收货地址',
                    align: "center",
                },
                {
                    field: 'beizhu',
                    title: '备注',
                    align: "center",
                },
                {
                    field: 'wujinpeitao',
                    title: '五金配套',
                    align: "center",
                },
                {
                    field: 'shangpin',
                    title: '商品',
                    align: "center",
                    formatter: function (value, row, index) {
                        var action = []
                        // console.log(value)
                        var divstr = "<div style='display: grid;align-items: center;" +
                            "justify-content: center;grid-template-columns: repeat(1,0.85fr)'><table><tbody>"
                        for (let i = 0; i < value.length; i++) {
                            let colName = '';
                            let colSize = '';
                            let collagen = '';
                            let colNum = '';
                            colName = value[i].shangpinming
                            if (value[i].shangpinguigekuan !== 0) {
                                colSize = value[i].shangpinguigekuan + " * " + value[i].shangpinguigegao

                                if (value[i].shangpinkaixiang != null){
                                    colSize = colSize + "  " + value[i].shangpinkaixiang
                                }
                            }
                            collagen = value[i].shangpinshoujia
                            colNum = value[i].shangpinshuliang

                            divstr += "<tr>" +
                                "<td style='border-bottom: 0 \!important'>商品名：" + colName + "</td>" +
                                "<td style='border-bottom: none \!important'>尺寸：" + colSize + "</td>" +
                                "</tr>" +
                                "<tr>" +
                                "<td style='border-top: none \!important'>售价：" + collagen + "</td>" +
                                "<td style='border-top: none \!important'>进货数量：" + colNum + "</td>" +
                                "</tr>"
                        }
                        divstr += "</tbody></table></div>"
                        action.push(divstr)
                        return action.join('');
                    }
                },
                {
                    field: 'zongjine',
                    title: '总金额',
                    align: "center",
                },
                {
                    field: 'chuku',
                    title: '是否已出库',
                    align: "center",
                    formatter: function (value, row, index) {
                        var action = []
                        if (value == 1) {
                            action.push("已出库")
                        } else {
                            action.push("未出库")
                        }
                        return action.join('');
                    }
                },]
        };
        $.table.init(options);
    });

</script>
<script>
    function DanJuShow(id) {
        var data,danhao;
        var rows = $('#bootstrap-table').bootstrapTable('getData')
        rows.forEach((row) => {
            console.log(row.id)
            if (row.id == id) {
                danhao = row.chukudanhao
            }
        })
        $.ajax({
            type: "POST",
            datatype: "string",
            url: "/api/chukudanGet",
            data: {"danhao": danhao,"id":id},
            async: false,
            success: function (result) {
                console.log(result)
                if (result !== null) {
                    data = result
                    sessionStorage.setItem("danhao",data)
                    $.modal.open("出库单","/api/chukudan",1000,800)
                }
            }
        });


    }
</script>
</body>
</html>